<template>
	<xbd-pages-content title="修改资料">
		<!-- #ifdef APP-PLUS || H5 -->
		<template #default>
			<uni-nav-bar left-icon="back" right-text="保存" title="修改资料"  @clickLeft="clickLeft" @clickRight="clickRight" color="#394954" backgroundColor="#F8F8F8"></uni-nav-bar>
		</template>
		<!-- #endif -->
		<template #content>
			<view class="edit-data">
				<view class="row">
					<view class="title">
						车牌号
					</view>
					<view class="ipt">
						<uni-easyinput v-model="info.user_plate" :input-border="false" placeholder="请输入车牌号" ></uni-easyinput>
					</view>
				</view>
				<!-- #ifndef APP-PLUS || H5 -->
				<button type="default" class="btn" @click="clickRight">保存</button>
				<!-- #endif -->
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import { PersonalCenter } from '@/api/index.js';
	export default {
		data() {
			return {
				info: {
					user_plate: ''
				}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['changeUserIDcar', 'saveUserInfo']),
			clickLeft() {
				uni.navigateBack({
					delta: 1
				});
			},
			async clickRight() {
				if (this.info.user_plate !== '') {
					const regs = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/;
					if (!regs.test(this.info.user_plate)) {
						return this.$showToast('请输入正确格式车牌号！');
					}
				}
				try {
					this.$showLoading('加载中');
					const res = await PersonalCenter.putPlate(this.info);
					uni.hideLoading();
					if (res.success) {
						this.changeUserIDcar(this.info.user_plate);
						this.saveUserInfo();
						uni.navigateBack({
							delta: 1
						});
					} else {
						this.$showToast(res.msg);
					}
				} catch(e) {
					console.log(e);
					uni.hideLoading();
					
				}
			}
		},
		onLoad() {
			this.info.user_plate = this.userInfo.user_plate;
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-nav-bar-right-text {
		font-size: 14px;
		
		color: $uni-color-primary;
	}
	.edit-data {
		padding: 0 50rpx;
		
		background-color: #FFFFFF;
		.btn {
			position: fixed;
			bottom: 150px;
			left: 50%;
			transform: translateX(-50%);
			width: 400rpx;
			height: 36px;
			line-height: 36px;
			border-radius: 8rpx;
			
			
			font-size: 28rpx;
			
			background-color: $uni-color-primary;
			color: #FFFFFF;
		}
		.title {
			font-size: 14px;
			
			color: $uni-text-color;
		}
		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			height: 60px;
			border-bottom: 1px solid #F8F8F8;
			
			box-sizing: border-box;
			.ipt {
				width: 300rpx;
				.uni-easyinput {
					color: $uni-text-color !important;
				}
			}
		}
	}
</style>
